<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="会员购买">
        <a-form :model="formState">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="用户名称">
                <a-input
                  style="width: 100%"
                  v-model:value.trim="formState.nickName"
                  placeholder="输入用户名称"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="用户账号">
                <a-input
                  style="width: 100%"
                  v-model:value.trim="formState.phone"
                  placeholder="输入用户账号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="购买时间">
                <a-range-picker
                  v-model:value="dateTime"
                  @change="handleChangeDate"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
          <a-space wrap>
            <a-button type="primary" @click="handleExport">导出</a-button>
          </a-space>
        </div>
      </a-card>

      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="buyColumns"
          :pagination="pagination"
          @change="handleChangeSize"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'payType'">
              {{ record.payType == 1 ? "微信支付" : "支付宝支付" }}
            </template>
            <template v-else-if="column.key === 'memberState'">
              {{ record.memberState == 1 ? "生效中" : "已结束" }}
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { buyColumns } from "./columns.js";
import { getMemberOrderList, exportMemberOrderList } from "@/api/finanical";
import { exporeFile } from "@/utils/exporeFile";
const pagination = ref({
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total) => `共 ${total} 条`,
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  nickName: undefined,
  phone: undefined,
  startTime: undefined,
  endTime: undefined,
});
// 修改时间
const dateTime = ref([null, null]);
const handleChangeDate = (date, dateString) => {
  dateTime.value = date;
  formState.value.startTime = dateString[0];
  formState.value.endTime = dateString[1];
};
const dataSource = ref([]);
// 获取table数据
const getMemberOrderListFn = async () => {
  const { data } = await getMemberOrderList(formState.value);
  dataSource.value = data.list;
  pagination.value.total = data.total;
};

function handleSearch() {
  formState.value.page = 1
  formState.value.pageSize = 10
  getMemberOrderListFn();
}
function handleReset() {
  dateTime.value = [null, null];
  formState.value = {
    page: 1,
    pageSize: 10,
    nickName: undefined,
    phone: undefined,
    startTime: undefined,
    endTime: undefined,
  };
  pagination.value.current = 1
  pagination.value.pageSize = 10
  getMemberOrderListFn();
}

const handleExport = async () => {
  const data = await exportMemberOrderList(formState.value);
  exporeFile("会员购买列表.xls", data);
};
function handleChangeSize(page) {
  formState.value.page = page.current;
  formState.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  pagination.value.pageSize = page.pageSize;
  getMemberOrderListFn();
}
onMounted(() => {
  getMemberOrderListFn();
});
</script>

<style lang="less">
.img-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}
</style>
